<template>
    <div>
        <div v-if="tabId ==1">
            <rx-grid ref="table" :dataSource="fields" :allowRowSelect="false" :multiSelect="true" :showPage="false"
                     :columns="columns" style="height: 300px;">
				<span slot="level" slot-scope="{text,record,index,blur}">
					<a-input-number :min="1" v-model="record.level" @blur="blur(index,'level',text,record)" />
				</span>
                <span slot="permission" slot-scope="{text,record,index,blur}"
                      @click="editRecord(record,index,'permission','table')" @ok="blur(index,'permission',$event,record)">
					{{record.permission_name}}
				</span>
            </rx-grid>
        </div>
    </div>
</template>
<script>
import FormBoDefApi from '@/api/form/bo/formBoDef'
import {
    Util,App
} from "@lowcode/jpaas-common-lib"
import FormUserPermissionEdit from "../core/formPermission/FormUserPermissionEdit";
import DialogBox from "@/assets/js/DialogBox";

export default {
    name: 'FormBoDefForm',
    props: ["pkId", "layerid", "destroy", "tabId"],
    mixins:[App],
    components: {
        FormUserPermissionEdit
    },
    data() {
        return {
            fields: [],
            columns: [{
                title: this.boentI18n('form.name','名称'),
                dataIndex: 'name',
                width: 120
            },
                {
                    title: this.boentI18n('form.alias','别名'),
                    dataIndex: 'alias',
                    width: 120
                }
            ]
        }
    },
    computed: {
        table() {
            return this.$refs.table;
        },
        mTable() {
            return this.$refs.mTable;
        }
    },
    created() {
        this.relationForm();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formBoDef",key);
        },
        boentI18n(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        editRecord(record, index, type, tableId) {
            DialogBox.openPermissionUser(this, record[type], function(self_, data) {
                var datas = self_[tableId].getData();
                var row = datas[index];
                self_.setChangeValues(data, row, type, tableId);
            });
        },
        setChangeValues(data, row, type, tableId) {
            var typeName = type + "_name";
            var rowData = {};
            rowData[type] = data.value;
            rowData[typeName] = data.label;
            this[tableId].updateRow(row, rowData);
        },
        parsePcData(data) {
            let appId = this.curApp.appId;
            return data.map(item => {
                return {
                    formId: item.id,
                    boDefId: item.boDefId,
                    level: item.level,
                    appId: appId,
                    permission: JSON.stringify({
                        key: item.permission,
                        label: item.permission_name
                    })
                }
            })
        },
        handleOk() {
            var pcData = this.table.getData();
            var mobileData = this.mTable.getData();
            var json = {
                pc: this.parsePcData(pcData),
                mobile: this.parsePcData(mobileData)
            };
            FormBoDefApi.savePermission(json).then(res => {
                if (res.success) {
                    Util.closeWindow(this, "ok");
                }
            })
        },
        relationForm() {
            FormBoDefApi.getRelForm(this.pkId).then(res => {
                var data = res.data;
                this.fields = data.pc;
            })
        }
    }
}
</script>
